// 引入路由退出重置路由
import { resetRouter } from '@/router'
// ------------------分割线----------------------
// 引入登录接口,用户信息
import { login, userInfo, getUserDetailById } from '@/api/user'
// 引入存储cookie组件
import { setToken, getToken, removeToken } from '@/utils/auth'

export default {
  // 开启模块命名空间,才算是严格的模块化管理
  // 访问 mutation actions 函数 的时候 都需要在前面加上模块名称才可以
  namespaced: true,
  // 箭头函数?
  // data(){return {响应式数据}} 复用的时候如果直接写成对象,由于引用类型的特性各个组件之间共享data中的数据,组件一个发生改变会影响到其他组件

  // 改变函数 return对象之后,每一次组件的复用的时候都会重新执行一下这个函数

  // 每次返回的都一个全新的对象,也就是每一个复用的组件都拥有一份自己独立的数据 互不影响

  // vuex中的模块也是可能进行复用的 为了复用的时候 互相不影响 采用同样的函数执行 return 对象的形式

  state: () => ({
    // 每次尝试从cookie中读取token
    token: getToken() || '',
    userInfo: {}
  }),
  mutations: {
    // token赋值
    setToken(state, val) {
      state.token = val
    },
    // 个人资料赋值
    setUserInfo(state, val) {
      state.userInfo = val
    },
    // 删除token及个人资料
    removeTokenInfo(state) {
      // 1.清空token
      state.token = ''

      // 2清空个人信息
      state.userInfo = {}

      // 3.清空cookie数据
      removeToken()

      // 4. 重置路由
      resetRouter()
    }
  },
  actions: {
    // 异步token赋值
    async asyncSetToken(store, val) {
      // 1.调用接口获取数据
      const res = await login(val)

      return new Promise((resolve) => {
        // 2. 获取token并存入vuex
        store.commit('setToken', res)

        // 2. 将token存入到cookie
        setToken(res)

        // 3. 返回结果进行跳转操作
        resolve()
      })
    },
    async asyncSetUserInfo(store) {
      // 1.获取用户基本信息的接口
      const res = await userInfo()

      // 2. 依赖基本信息获取头像的接口
      const imgRes = await getUserDetailById(res.userId)

      // 异步执行
      return new Promise((resolve) => {
        // 3. 数据存储到vuex中
        store.commit('setUserInfo', { ...res, ...imgRes })
        // 4. 再进行之后的跳转
        resolve({ ...res, ...imgRes })
      })
    }

  }

}
